<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>regist</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2009/11/20
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">main</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						注册
					</h1>
					<form action="/emp/regist/" method="post" id="form">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									用户名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="username" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									真实姓名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="realname" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									密码:
								</td>
								<td valign="middle" align="left">
									<input type="password" class="inputgri" name="pwd" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									性别:
								</td>
								<td valign="middle" align="left">
									男
									<input type="radio" class="inputgri" name="sex" value="m" checked="checked"/>
									女
									<input type="radio" class="inputgri" name="sex" value="f"/>
								</td>
							</tr>
							
							<tr>
								<td valign="middle" align="right">
									验证码:
									<img id="num" src='/emp/code/1/' />
									<a href="javascript:;" onclick="document.getElementById('num').src = '/emp/code/'+(new Date()).getTime()">换一张</a>
								</td>
								<td valign="middle" align="left">
									<input id="number" onblur="f1()" type="text" class="inputgri" name="number" />
                                    <span id="myspan"></span>
								</td>
							</tr>
						</table>
						<p>
							<input type="button" class="button" value="Submit &raquo;" onclick="f2()"/>
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				ABC@126.com
				</div>
			</div>
		</div>
	</body>

<script>
    //验证码失去焦点
    function f1(){
        //获得用户输入的验证码
        var number = document.getElementById('number').value

        //1.创建XMLHttpRequest对象,发送异步请求(Ajax)
       var xhr = null
        if (window.XMLHttpRequest){ //高版本浏览器，会有这个属性
            xhr = new XMLHttpRequest()
        } else { //表示低版本的浏览器，没有这个属性
            xhr = new ActiveXObject('Microsoft.XMLHttpRequest');
        }

        //2.设置回调函数
        xhr.onreadystatechange = function (){
            if(xhr.readyState==4 && xhr.status==200){
                // responseText服务器响应文本
                //innerHTML标签中的内容
                document.getElementById('myspan').innerHTML = xhr.responseText
            }
        }

        //3.创建请求
        xhr.open('get','/emp/check_code/'+number,true)

        //4.发送请求
        xhr.send(null)
    }

    //表单点击按钮
    function f2(){
        //先找到span，判断成不成功，成功就提交
        if(document.getElementById('myspan').innerHTML == "success"){
            //定位到表单
            document.getElementById('form').submit()
        }
    }
</script>

</html>
